<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/index.css}" >
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<!--主页的头-->
    <div class="header">
        <div class="header-bar-1">
            <div class="container">
                <div class="barlist right  clear">
                    <ul>
                        <li th:if="${session.user == null}"><a th:href="@{/login}">登录</a></li>
                        <li th:if="${session.user == null}"><a th:href="@{/logout}">注册</a></li>
                        <li th:if="${session.user != null}"><a><img th:src="@{'/upload/'+${session.user.getImage}}"></a></li>
                        <li th:if="${session.user != null}">个人中心</li>
                        <li th:if="${session.user != null}">注销</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header-bar-2">
            <div class="head-bar-wrap">
                <div class="container">
                    <div class="center left">
                        <div class="left clear">
                            <a>
                                <img th:src="@{/images/logo-header.png}"data-logo-alt="images/logo-header-alt.png">
                            </a>
                        </div>
                        <div class="left clear">
                            <ul style="color: black">
                                <li><a>首页</a></li>
                                <li><a>火车航班</a></li>
                                <li><a>高铁航班</a></li>
                                <li><a>订单</a></li>
                                <li><a>个人信息</a></li>
                                <li><a>更多</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class=""></div>
                </div>
        </div>
    </div>
<!--主题-->
    <div class="banner">
        <div class="lunbo">
            <div class="layui-carousel" id="test10">
                <div carousel-item="">
                    <div><img th:src="@{/images/banner10.jpg}" ></div>
                    <div><img th:src="@{/images/banner11.jpg}" ></div>
                    <div><img th:src="@{/images/banner12.jpg}" ></div>
                    <div><img th:src="@{/images/banner10.jpg}" ></div>
                    <div><img th:src="@{/images/banner26.jpg}" ></div>
                    <div><img th:src="@{/images/banner10.jpg}" ></div>
                    <div><img th:src="@{/images/banner13.jpg}" ></div>
                </div>
            </div>
        </div>
        <div class="search">
            <div class="layui-tab layui-tab-card " style="width: 500px">
                <ul class="layui-tab-title" style="width: 400px;border-radius: 5px">
                    <li class="layui-this">火车票</li>
                    <li>飞机票</li>
                    <li>汽车|打车</li>
                    <li>酒店</li>
                </ul>
                <div class="layui-tab-content searchbox" style="height: 230px;">
                    <div class="layui-tab-item layui-show" style="width: 300px">
                        <form class="layui-form" style="top: 40px" action="" method="post">
                            <!--选择出发点-->
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: 100px">
                                        <select name="start" lay-filter="aihao">
                                            <option value=""></option>
                                            <option value="0">写作</option>
                                            <option value="1" selected="">出发点</option>
                                            <option value="2">游戏</option>
                                            <option value="3">音乐</option>
                                            <option value="4">旅行</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline nizhi"><img th:src="@{/images/nizhi.png}" style="width: 30px"></div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <select name="begin" lay-filter="aihao">
                                            <option value=""></option>
                                            <option value="0">写作</option>
                                            <option value="1" selected="">结束点</option>
                                            <option value="2">游戏</option>
                                            <option value="3">音乐</option>
                                            <option value="4">旅行</option>
                                        </select>
                                    </div>
                                </div>
                                <!--日期-->
                                <div class="layui-inline">
                                    <div class="layui-input-inline"style="margin-top: 20px; width: 275px">
                                        <input type="text" class="layui-input" id="test1" placeholder="出发时间">
                                    </div>
                                    <div class="layui-input-inline" style="width: 200px">
                                        <input type="checkbox" name="like[write]" title="学生票">
                                        <input type="checkbox" name="like[read]" title="动车">
                                    </div>
                                </div>
                                <!--提交-->
                                <div class="layui-input-block">
                                    <button  type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查看车次</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">2</div>
                    <div class="layui-tab-item">3</div>
                    <div class="layui-tab-item">4</div>
                </div>
            </div>
        </div>
        <div class="other">
            <div class="layui-bg-gray" style="padding: 30px; height: 300px">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><font style="font-size: 20px">热门路线 </font>
                                &nbsp;/热门路线推荐</div>
                            <div class="layui-card-body" style="height: 200px">
                                卡片式面板面板通常用于非白色背景色的主体内<br>
                                从而映衬出边框投影
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">卡片面板</div>
                            <div class="layui-card-body" style="height: 200px">
                                结合 layui 的栅格系统<br>
                                轻松实现响应式布局
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--尾部-->
    <div class="footer"></div>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:href="@{/js/index.js}"></script>
    <script>
        layui.use(['carousel', 'form','element','laydate'], function() {
            var carousel = layui.carousel
                , form = layui.form ,
                $ = layui.jquery,
                element = layui.element;
            var laydate = layui.laydate;
            //常规轮播
            laydate.render({
                elem: '#test1'
            });
            carousel.render({
                elem: '#test10'
                , arrow: 'always'
                , width: '100%'
                , height: '440px'
            });


            //search
            layui.use('element', function(){
                var $ = layui.jquery
                    ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

                //触发事件
                var active = {
                    tabChange: function(){
                        //切换到指定Tab项
                        element.tabChange('demo', '22'); //切换到：用户管理
                    }
                };

                $('.site-demo-active').on('click', function(){
                    var othis = $(this), type = othis.data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });

                //Hash地址的定位
                var layid = location.hash.replace(/^#test=/, '');
                element.tabChange('test', layid);

                element.on('tab(test)', function(elem){
                    location.hash = 'test='+ $(this).attr('lay-id');
                });

            });
        });
    </script>
</body>
</html>